<template>
  <div class="addInquiry">
    <div class="wrap">
      <div class="hd">
        <span>请认真对照《机动车行驶证》 认真填写一下信息</span>
      </div>
      <div class="bd">
        <div class="cell">
          <lable class="carNoK">车辆号
            <select v-model="obj.areaType">
              <option v-for="(a, index) in areaList" :selected="index === 1">{{a}}</option>
            </select>
          </lable>
          <input class="carNoV" type="text" placeholder="请输入车牌号" v-model="obj.car_no" maxlength="7"/>
        </div>
        <div class="cell">
          <lable>车辆类型</lable>
          <select v-model="obj.car_type">
            <option :value="car.id" v-for="car in carTypeList">{{car.name}}</option>
          </select>
        </div>
        <div class="cell">
          <lable>车架号</lable>
          <input type="text" placeholder="请输入车架号后6位" v-model="obj.frame_number" maxlength="6"/>
        </div>
        <div class="cell">
          <lable>发动机号</lable>
          <input type="text" placeholder="请输入发动机号后6位" v-model="obj.engine_number" maxlength="6"/>
        </div>
      </div>
    </div>
    <div class="bt">
      <button @click="submit">立即查询</button>
    </div>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
 import * as API from '../assets/js/API.js'
 export default {
   data () {
     return {
       openid: window.localStorage.getItem('openid'),
       access_token: window.localStorage.getItem('accessToken'),
       spinShow: false, // 是否已经点击
       areaList:
       ['粤', '京', '津', '冀',
         '晋', '蒙', '辽', '吉', '黑', '赣', '沪', '苏', '皖',
         '闽', '青', '鲁', '豫', '鄂', '湘', '浙', '桂', '琼', '渝',
         '川', '贵', '云', '甘', '新', '宁', '藏', '陕', '台'],
       carTypeList:
       [{'id': 1, 'name': '大型汽车'},
       {'id': 2, 'name': '小型汽车'},
       {'id': 6, 'name': '外籍汽车'},
       {'id': 7, 'name': '两、三轮摩托车'},
       {'id': 15, 'name': '挂车'},
       {'id': 16, 'name': '教练汽车'},
       {'id': 26, 'name': '香港出入境车'},
       {'id': 27, 'name': '澳门出入境车'}
       ],
       obj: {
         areaType: '粤',
         car_no: '',
         frame_number: '',
         car_type: '',
         engine_number: ''
       }
     }
   },
   created () {
   },
   methods: {
     navTo (link) {
       this.$router.push({path: link})
     },
     // 提交
     submit () {
       // 防止频繁提交控制
       this.spinShow = true
       // 判断车辆号是否为空
       if (this.obj.car_no === '') {
         this.$Message.info('请输入车辆号')
         this.overClick()
         return
       }
       // 判断车辆号长度
       // 判断车辆类型是否为空
       if (this.obj.car_type === '') {
         this.$Message.info('请选择车辆类型')
         this.overClick()
         return
       }
       // 判断车架号是否为空
       if (this.obj.frame_number === '') {
         this.$Message.info('请输入车架号')
         this.overClick()
         return
       }
       //  判断车架号长度
       if (this.obj.frame_number.length <= 5) {
         this.$Message.info('请输入正确的车架号')
         this.overClick()
         return
       }
       // 判断发动机号是否为空
       if (this.obj.engine_number === '') {
         this.$Message.info('请输入发动机号')
         this.overClick()
         return
       }
       // 判断发动机号长度
       if (this.obj.engine_number.length <= 5) {
         this.$Message.info('请输入正确的发动机号')
         this.overClick()
         return
       }
       this.addInquiry()
     },

     // 防止频繁单击
     overClick () {
       setTimeout(() => {
         this.spinShow = false
       }, 500)
     },
     // 添加车辆查询
     addInquiry () {
       let param = {
         openid: this.openid,
         car_no: this.obj.areaType + this.obj.car_no.toUpperCase(),
         frame_number: this.obj.frame_number.toUpperCase(),
         car_type: this.obj.car_type,
         engine_number: this.obj.engine_number
       }
       this.$http.post(API.AddInquiry, {access_token: this.access_token, param: JSON.stringify(param)}).then(
          (resp) => {
            let msg = resp.body.msg
            if (msg === 'OK') {
              this.$Message.info('添加成功!')
              setTimeout(() => {
                this.navTo('/index/' + this.access_token + '/' + this.openid)
              }, 2000)
            } else {
              this.$Message.info(msg)
              this.spinShow = false
            }
          }
        )
     }
   },
   filters: {
     change (v) {
       console.log(v)
     }
   }
 }
</script>
<style lang="scss">
  @import '../assets/style/common.scss';

  .addInquiry {
    /*background-color: #eee;*/
    .wrap {
      background-color: #fff;
      font-size: px2rem(25px);
      > .hd {
        width: 100%;
        height: px2rem(60px);
        line-height: px2rem(60px);
        text-align: center;
        background-color: #35b41c;
        color: #fff;
      }
      > .bd {
        padding: px2rem(10px);
        .cell {
          padding: px2rem(20px) px2rem(20px);
          box-sizing: border-box;
          height: px2rem(100px);
          /*line-height: px2rem(100px);*/
          lable {
            display: inline-block;
            float: left;
            width: 100px;
            select {
              display: inline-block;
              width: px2rem(90px);
              height: px2rem(50px);
              outline: none;
              border: 1px solid #f1f1f1;
              border-radius: px2rem(5px);
            }

          }
          > input, select {
            width: calc(100% - 100px);
            height: px2rem(45px);
            outline: none;
            border: none;
            border-bottom: 1px solid #f1f1f1;
            padding-left: px2rem(10px);
            text-transform : uppercase;
          }
          select {
            border: 1px solid #f1f1f1;
            border-radius: px2rem(5px);
          }
          .carNoK {
            width: 130px;
          }
          .carNoV {
            width: calc(100% - 130px);
            text-transform : uppercase
          }
        }
      }
    }
    > .bt {
      button {
        height: px2rem(60px);
        width: 80%;
        line-height: px2rem(60px);
        border: none;
        outline: none;
        background-color: #35b41c;
        font-size: px2rem(26px);
        color: #fff;
        margin: px2rem(20px) 10%;
        border-radius: px2rem(5px);
      }
    }
  }
</style>
